*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
html {
    font-family: 'Open Sans', Helvetica, arial, sans-serif;
    text-align: center;
    background-color: #eeeeee;
}
body{
    width: 100%;
    height: 100%;
    padding:50px 0;
}
html *,
html *:before,
html *:after {
    box-sizing: border-box;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
*:before,
*:after {
    z-index: -1;
}
.main{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}
.container{
    float: left;
    width: 47%;
    margin-left: 3%;
}
/*....*/
a{
    line-height: 80px;
    box-sizing: border-box;
    color: black;
}
a:hover{
    cursor: pointer;
}
.btn-1{
    color:#925073;
}
[class^="btn-"]{
    position: relative;
    display: block;
    margin: 20px auto;
    width: 100%;
    height: 80px;
    max-width: 250px;
    text-transform:uppercase;
    overflow:hidden;
    border:1px solid currentColor;/*currentColor当前文字的颜色*/
}
.btn-1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 80px;
    background: #4c1d36;
}
.btn-1:hover{
    color:#dfccd6;
}
.btn-1:hover:before {
    width: 250px;
}
.btn-1:active {
    background: #7f315a;
}
/*按钮2*/
.btn-2 {
    color: #af4e49;
}
.btn-2:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: #611c19 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
}
.btn-2:hover {
    color: #e8cbca;
}
.btn-2:hover:after {
    border-width: 330px 330px 0 0;/*上、右、下、左*/
}
.btn-2:active {
    background: #a12f29;
}
/*按钮3*/
.btn-3{
    color: #61cdbe;
}
.btn-3:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #29766b;
    position: absolute;
    bottom: 0;
    left: 0;
}
.btn-3:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent #29766b transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}
.btn-3:hover {
    color: #d1f0ec;
}
.btn-3:hover:before {
    border-width: 207px 0 0 207px;
}
.btn-3:hover:after {
    border-width: 0 0 207px 207px;
}
.btn-3:active {
    background: #45c4b3;
}
/*按钮4*/
.btn-4{
    color: #306570;
}
.btn-4:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #072c34;
    position: absolute;
    bottom: 0;
    left: 0;
}
.btn-4:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent #072c34 transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
}
.btn-4:hover {
    color: #c2d2d5;
}
.btn-4:hover:before {
    border-width: 165px 0 0 165px;
}
.btn-4:hover:after {
    border-width: 0 165px 165px 0;
}
.btn-4:active {
    background: #0c4a57;
}
/*按钮5*/
.btn-5{
    color: #c45561;
}
.btn-5:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #6f2129;
    position: absolute;
    bottom: 0;
    left: 0;
}
.btn-5:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent #6f2129 transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
}
.btn-5 span:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent #6f2129 transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}
.btn-5 span:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: #6f2129 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
}
.btn-5:hover {
    color: #eecdd1;
}
.btn-5:hover:before {
    border-width: 165px 0 0 165px;
}
.btn-5:hover:after {
    border-width: 0 165px 165px 0;
}
.btn-5:hover span:before {
    border-width: 0 0 165px 165px;
}
.btn-5:hover span:after {
    border-width: 165px 165px 0 0;
}
.btn-5:active {
    background: #b93745;
}
/*按钮6*/
.btn-6 {
    color: #7d8d5c;
}
.btn-6:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent #3d4926 transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
}
.btn-6:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #3d4926;
    position: absolute;
    bottom: 0;
    left: 0;
}
.btn-6:before, .btn-6:after {
    border-color: #3d4926;
}
.btn-6 span:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: #3d4926 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
}
.btn-6 span:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent #3d4926 transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}
.btn-6 span:before, .btn-6 span:after {
    border-color: #3d4926;
}
.btn-6:hover {
    color: #d9decf;
}
.btn-6:hover:before {
    border-width: 20px 62.5px;
}
.btn-6:hover:after {
    border-width: 20px 62.5px;
}
.btn-6:hover span:before {
    border-width: 20px 62.5px;
}
.btn-6:hover span:after {
    border-width: 20px 62.5px;
}
.btn-6:active {
    background: #66793f;
}
/*按钮7*/
.btn-7{
    color: #2a4770;
}
.btn-7:after {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent #021734 transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
}
.btn-7:before {
    content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #021734;
    position: absolute;
    bottom: 0;
    left: 0;
}
.btn-7:hover {
    color: #c0c9d5;
}
.btn-7:hover:before, .btn-7:hover:after {
    border-width: 80px 260px;
}
.btn-7:active {
    background: #042757;
}
/*按钮8*/
.btn-8{
    color: #41c46a;
}
.btn-8:before, .btn-8:after,
.btn-8 span:before,
.btn-8 span:after {
    content: '';
    position: absolute;
    top: 0;
    width: 63.5px;
    height: 0;
    background: #136f30;
}
.btn-8:before {
    left: 0;
}
.btn-8:after {
    left: 125px;
}
.btn-8 span:before, .btn-8 span:after {
    top: auto;
    bottom: 0;
}
.btn-8 span:before {
    left: 62.5px;
}
.btn-8 span:after {
    left: 187.5px;
}
.btn-8:hover {
    color: #c7eed3;
}
.btn-8:hover:before, .btn-8:hover:after,
.btn-8:hover span:before,
.btn-8:hover span:after {
    height: 80px;
}
.btn-8:active {
    background: #1fb950;
}
/*按钮9*/
.btn-9{
    color: #377660;
}
.btn-9:before, .btn-9:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 0;
    background: #0c3829;
}
.btn-9:after {
    top: auto;
    bottom: 0;
}
.btn-9:hover {
    color: #c4d7d0;
}
.btn-9:hover:before, .btn-9:hover:after {
    height: 40px;
}
.btn-9:active {
    background: #145e44;
}
/*按钮10*/
.btn-10{
    color: #9b5097;
}
.btn-10:before, .btn-10:after,
.btn-10 span:before,
.btn-10 span:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 0;
    background: rgba(82, 29, 80, 0.25);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.btn-10:after,
.btn-10 span:before {
    top: auto;
    bottom: 0;
}
.btn-10 span:before,
.btn-10 span:after {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.btn-10:hover {
    color: #e2cce1;
}
.btn-10:hover:before, .btn-10:hover:after,
.btn-10:hover span:before,
.btn-10:hover span:after {
    height: 80px;
}
.btn-10:active {
    background: #893185;
}
/*按钮11*/
.btn-11{
    color: #4ab36a;
}
.btn-11:before, .btn-11:after,
.btn-11 span:before,
.btn-11 span:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 80px;
    background: rgba(25, 99, 48, 0.25);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.btn-11:after,
.btn-11 span:before {
    left: auto;
    right: 0;
}
.btn-11 span:before,
.btn-11 span:after {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.btn-11:hover {
    color: #cae9d3;
}
.btn-11:hover:before, .btn-11:hover:after,
.btn-11:hover span:before,
.btn-11:hover span:after {
    width: 250px;
}
.btn-11:active {
    background: #2aa550;
}
/*按钮12*/
@-webkit-keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 375px;
        height: 375px;
    }
}

@keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 375px;
        height: 375px;
    }
}
@-webkit-keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 375px;
        height: 375px;
    }
}
@keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 375px;
        height: 375px;
    }
}
.btn-12{
    position: relative;
    color: #9248bc;
}
.btn-12:before, .btn-12:after {
    position: absolute;
    top: 50%;
    content: '';
    width: 20px;
    height: 20px;
    background: #9248bc;
    border-radius: 50%;
}
.btn-12:before {
    left: -20px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*     animation: criss-cross-left 0.8s reverse; */
}
.btn-12:after {
    right: -20px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    /*     animation: criss-cross-right 0.8s reverse; */
}
.btn-12:hover:before {
    -webkit-animation: criss-cross-left 0.8s both;
    animation: criss-cross-left 0.8s both;
}
.btn-12:hover:after {
    -webkit-animation: criss-cross-right 0.8s both;
    animation: criss-cross-right 0.8s both;
}
.btn-12:hover {
    color: #cae9d3;
}
/*按钮13*/
.btn-13-js{
    color: #5189D0;
}
.btn-13-js span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #5189D0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: width 0.4s, height 0.4s;
    transition: width 0.4s, height 0.4s;
    z-index: -1;
}
.btn-13-js:hover {
    color: #e5ccf1;
}
.btn-13-js:hover span {
    width: 562.5px;
    height: 562.5px;
}
.btn-13-js:active {
    background: #1080D9;
}